//aaaa隐藏
/*aaaa显示*/
//一、基础变量,最常用：颜色、尺寸等直接复用的值
// // 语法：@变量名：变量值；（无需引号，直接使用）
@color: green;
@bgColor: red;
@width:200px;
@height:200px;
// 基础变量使用：直接通过 @变量名 调用
#wrap {
    color: @color;
    background-color: @bgColor;
    width: @width;
    height: @height;
}
// 2. 变量存储选择器名称（拼接前缀）
// .@{wrap} { }
// 编译后：.wrap { ... }（类选择器）
@mySelector: #wrap;
@wrap:wrap;
@{mySelector}{
    color: #ccc;
    width: 50%;
}
.@{wrap}{
    color: #ccc;
    width: 50%;
}
#@{wrap}{
    color: #ccc;
    width: 50%;
}

//3.属性变量（变量存储 CSS 属性名，通过 @{} 插值调用）
// 场景：属性名较长或需统一修改时使用（如 border-style）
@borderStyle:border-style;// 存储属性名
@soild:solid;// 存储属性值
@{mySelector}{
    @{borderStyle}:@soild;
}
//4.url变量（存储文件路径，拼接资源名）
@images:"../img";

body{
    background: url("@{images}/cat.png");
}

//5.声明变量,比如超出省略号可以用这个
//存储一段 CSS 样式块，通过 () 调用）
@background:{background:red;};//样式声明
@Rules:{//样式声明
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
// 使用：变量名 + () 调用（必须加括号）
#main{
    @background();
}
#wrap{
    @Rules();
}
//6.变量运算
@width:300px;
@color:#222;
#wrap {
    width:@width - 20;
    height: @width - 20 * 5;
    margin: (@width - 20) * 5;
    color: @color * 2;
}
//7.变量作用域/就近优先
// 规则：变量的生效范围是「当前代码块 + 子代码块」，同名变量就近覆盖
@var:@a;
@a:100%;
#wrap {
    width: @var;
    @a:9%;
}
//8.用变量去定义变量,变量值是「文本、类名、路径、带特殊字符的值」—— 必须加引号；
//变量值是「数值、颜色、CSS 关键字」—— 不用加引号
@fond:@var;
@var: 'fond';
#wrap{
    content: @var;
}
/* 补充：变量使用关键注意点 */
// 1. 插值语法：选择器、属性名、URL 必须用 @{} 包裹变量（如 @{wrap}）
// 2. 声明变量调用：必须加 ()如 @Rules (...)
// 3. 作用域：内部变量覆盖外部变量，子可访问父变量，父不能访问子变量